<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    /*div{*/
    /*    width: 500px;*/
    /*    height: 500px;*/
    /*    background-color: yellow;*/
    /*}*/
    .father{
        background-color: yellow;
        overflow: hidden;
        /*overflow: hidden;*/
        /*给父级添加overflow：hidden 就是给父级添加了bfc*/
    }
    .son{
        float: left;

        /*background-color: #8ac060;*/
        /*height: 100px;*/
        /*margin-top: 10px;*/
    }
</style>

</head>
<body>
<!--<div id="dv" >-->

<!--</div>-->
<div class="father">
    <div class="son">123</div>
</div>
</body>
<script>
    var dv= document.getElementById("dv");
    // console.log(dv.style.width);
    // console.log(dv.current.width);
    console.log(window.getComputedStyle(dv).width);
    console.log(dv.getBoundingClientRect().width);
    // console.log(dv.current.width);



</script>
</html>